@import "./variables.less";
@import "../mixins/opacity.less";
.ake_btn {
  display: inline-block;
  padding-left: 28px;
  padding-right: 28px;
  font-size: @baseFontSize;
  text-align: center;
  text-decoration: none;
  color: #FFF;
  height: 30px;
  line-height: 30px;
  border-radius: @baseBorderRadius;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  white-space: nowrap;
  vertical-align: middle;
  user-select:none;
  cursor: pointer;
  letter-spacing: 2px;
  border:none;
  outline: none;
  touch-action: manipulation;

  &.btn_square {
    border-radius: @squareBorderadius;
  }

  &.btn-sm {
    height: 26px;
    line-height: 26px;
    padding-left: @spacing + 2px;
    padding-right: @spacing + 2px;
    font-size: 12px;
  }

}

.ake_btn[disabled],.ake_btn.disabled {
  cursor: not-allowed;
  filter: alpha(opacity=65);
  -webkit-box-shadow: none;
  box-shadow: none;
  opacity: .65;
}

.ake_btn.disabled {
  pointer-events: none;
}


.ake_btn_blue {
  background-color: @blue;
  &:hover,&:focus {
    color:#fff;
    background-color: darken(@blue, 10%);
  }
  &:active {
    color:#fff;
    background-color: darken(@blue, 30%);
  }
}

.ake_btn_green {
  background-color: @green;
  &:hover,&:focus  {
    color:#fff;
    background-color: darken(@green, 10%);
  }
  &:active {
    color:#fff;
    background-color: darken(@green, 30%);
  }
}

.ake_btn_red {
  background-color: @red;
  &:hover,&:focus  {
    color:#fff;
    background-color: darken(@red, 10%);
  }
  &:active {
    color:#fff;
    background-color: darken(@red, 30%);
  }
}

.ake_btn_gray {
  background-color: @greydd;
  color:@darkGrey;
  &:hover,&:focus  {
    color:@darkGrey;
    background-color: darken(@greydd, 10%);
  }
  &:active {
    color:@darkGrey;
    background-color: darken(@greydd, 30%);
  }
}

.ake_btn_darkBlue {
  background-color: @subBg;
  color: @white;
  &:hover, &:focus {
    color: @white;
    background-color: darken(@subBg, 10%);
  }
  &:active {
    color: @white;
    background-color: darken(@subBg, 30%);
  }
  &.ake_btn_text {
    background-color: @white;
    color: @subBg;
    border: 2px solid @subBg;
    line-height: 28px;
    &:hover, &:focus {
      background-color: @white;
      color: darken(@subBg, 10%);
      border: 2px solid darken(@subBg, 10%);
    }
    &:active {
      background-color: @white;
      color: darken(@subBg, 30%);
      border: 2px solid darken(@subBg, 30%);
    }
  }
}

.ake_btn_text {
  background-color: #fff;
  color:@blue;
  border:1px solid @blue;
  &:hover,&:focus  {
    color:@blue;
    background-color: #E7ECF5;
  }
  &:active {
    color:@blue;
    background-color: #C6D5EF;
  }
  &.ake_btn_default {
    color: @grey99;
    border-color: @grey99;
  }
}


.ake_btn_blue.ake_btn[disabled],.ake_btn_blue.ake_btn.disabled {
  color:#fff;
  background-color: @blue;
}
.ake_btn_green.ake_btn[disabled],.ake_btn_green.ake_btn.disabled {
  color:#fff;
  background-color: @green;
}
.ake_btn_red.ake_btn[disabled],.ake_btn_red.ake_btn.disabled {
  color:#fff;
  background-color: @red;
}
.ake_btn_gray.ake_btn[disabled],.ake_btn_gray.ake_btn.disabled {
  color:@darkGrey;
  background-color: @greydd;
}
.ake_btn_gray.ake_btn[disabled],.ake_btn_gray.ake_btn.disabled {
  color:@blue;
  background-color: #fff;
}
.ake_btn_text.ake_btn[disabled],.ake_btn_text.ake_btn.disabled {
  color: @black;
  background-color: rgba(221, 221, 221, .6);
}
.btn_block {
    display: block;
    width: 100%;
    padding: 0;
}

.ake_btn{
  &.ake_font_btn{
      padding:0;
      width: 24px;
      height: 24px;
      line-height: 24px;
      letter-spacing: 0px;
  }
}

.ake_text_btn{
  color: @blue;
  &:hover,&:focus {
    color: darken(@blue, 10%);
  }
  &:active {
    color: darken(@blue, 30%);
  }
}

.icheck-icon{
    -webkit-appearance: none;
    appearance: none;
    background: #FFF;
    width: 20px;
    height: 20px;
    border: 0;
    box-shadow: inset 0px 1px 2px 1px #a9a6a6;
    border-radius: 4px;
    margin: 0;
    vertical-align: top;
    position: relative;
    cursor: pointer;
    &[disabled]{
        .opacity(.6);
    }
    &:focus{
      outline:0 !important;
    }
    /* &:hover{
        border-color: @checkboxBg;
        border-width: 2px;
    } */
    &:checked{
        background-color: @blue;
        border:0;
        box-shadow: none;
        &:hover{
            background-color: darken(@blue, 12%);
        }
        &::after {
          content: '';
          position: absolute;
          top: 4px;
          left: 4px;
          background-color: transparent;
          width: 13px;
          height: 8px;
          border-left: 2px solid #FFF;
          border-bottom: 2px solid #FFF;
          transform: rotate(-45deg);
        }

    }
}

.icheck {
  cursor: pointer;
}
